<template>
    <div>
        <el-row style="margin-top:2rem;" :gutter="20">
            <el-col :span="6" >
                <img src="../assets/mall.png" style="height:3rem" @click="skip_index" >
            </el-col>
            <el-col :span="12" style="margin-top:3px;">
                <el-input v-model="searchinput" placeholder="请输入商品名称">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="3" :offset="3"  style="height:3rem;">
                <el-link type="primary" v-show="$store.state.user==null"  @click="skip_login">登陆</el-link>
                <el-link  v-if="$store.state.user!=null"  @click="skip_personalcenter">{{$store.state.user.username}}</el-link>
                <el-badge :value="commodity_num" class="item">
                <el-link icon="el-icon-shopping-cart-2" @click="skip_cars" style="margin-left:2rem;font-size:20px;"></el-link>
                </el-badge>
            </el-col>
        </el-row>
    </div>
</template>


<style scoped>

</style>

<script>
export default {
    data:()=>{
        return {
            searchinput:'',
            commodity_num:0
        }
    },
    methods:{
        search(){
            this.$emit('fnc',this.searchinput)
        },
        skip_index(){
            this.$router.push("index")
        },
        skip_cars(){
            this.$router.push("cars")
        },
        skip_login(){
            this.$router.push("login")
        },
        skip_personalcenter(){
            this.$router.push("personalcenter")
        },
        getshoppingcartnum(){
            let token = localStorage.getItem('token')
            if(token!=null){
                this.$axios.get(this.$store.state.base_url+'/shoppingcart/?token='+token).then(data=>{
                    let shoppingcartlist=data.data.data
                    let totol_num=0
                    for (const iterator of shoppingcartlist) {
                        console.log(iterator)
                        totol_num+=iterator.num
                    }
                    this.commodity_num=totol_num
                })
            }
        }
    },
    watch:{
        'searchinput':function(){
            this.$emit('inputchange',this.searchinput)
        },
        "num":function(){
            console.log(this.commodity_num)
            this.getshoppingcartnum()
        }
    },
    props:["num"],
    created(){
        this.$store.dispatch('getUser')
        this.getshoppingcartnum()
    },

}
</script>